<template>
    <div class="Createprivateinstructor">
        <div class="Createprivateinstructor-title">创建新课程</div>
        <div class="Createprivateinstructor-content">
            <span>默认选择本地时区，点击可更改</span>
            <div class="content">
                <label class="Createcourse-data">
                    <span><i>*</i> 日期</span>
                    <el-date-picker 
                    @change ="changeTimer"
                    v-model="dataTimer" 
                    type="date" 
                    placeholder="选择日期"
                    :picker-options="pickerOptions"
                    ></el-date-picker>
                </label>
                <label class="Createcourse-Periodtime">
                    <span><i>*</i> 时间段</span>
                    <ul v-for="(item,index) in Periodtime" :key="index" class="Periodtime-List">
                        <span>{{item.Periodtimes}}</span>
                        <li v-for="(items,e) in item.tiemrs" :key="e" @click="chosePeriodtime(index,e,item.tiemrs)" :class="{'seled':chosePeriodtimeindex == index+'.'+e}" :style="panduanwai>index?'background: #555;color: #fff;cursor: no-drop;':panduanwai<index?'':panduannei>=e?'background: #555;color: #fff;cursor: no-drop;':''">{{items}}</li>
                        <!-- <li v-for="(items,e) in item.tiemrs"
                        :key="e"
                        @click="chosePeriodtime(index,e,item.tiemrs)"
                        :class="chosePeriodtimeindex == index+'.'+e?'seled':''">{{items}}</li> -->
                    </ul>
                </label>
                <label class="Createcourse-button">
                    <span>取消</span>
                    <span @click="ToCreatedClass">确认创建</span>
                </label>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'Createprivateinstructor',
    data(){
        return{
            pickerOptions: {
                // selectableRange: ['00:00:00 - 02:00:00'],  禁用得时间段
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7
                }
            },
            dataTimer:new Date,
            Periodtime:[
                {
                    Periodtimes:'凌晨',
                    tiemrs:['00:00-00:30','00:30-01:00','01:00-01:30','01:30-02:00','02:00-02:30','02:30-03:00','03:00-03:30','03:30-04:00','04:00-04:30','04:30-05:00','05:00-05:30','05:30-06:00']
                    
                },
                {
                    Periodtimes:'早上',
                    tiemrs:['06:00-06:30','06:30-07:00','07:00-07:30','07:30-08:00']
                    
                },
                {
                    Periodtimes:'上午',
                    tiemrs:['08:00-08:30','08:30-09:00','09:00-09:30','09:30-10:00','10:00-10:30','10:30-11:00','11:00-11:30','11:30-12:00']
                    
                },
                {
                    Periodtimes:'中午',
                    tiemrs:['12:00-12:30','12:30-13:00','13:00-13:30','13:30-14:00']
                    
                },
                {
                    Periodtimes:'下午',
                    tiemrs:['14:00-14:30','14:30-15:00','15:00-15:30','15:30-16:00','16:00-16:30','16:30-17:00','17:00-17:30','17:30-18:00']
                    
                },
                {
                    Periodtimes:'晚上',
                    tiemrs:['18:00-18:30','18:30-19:00','19:00-19:30','19:30-20:00','20:00-20:30','20:30-21:00','21:00-21:30','21:30-22:00','22:00-22:30','22:30-23:00','23:00-23:30','23:30-23:59']
                    
                }
            ],
            chosePeriodtimeindex:'',
            unserinfo:JSON.parse(localStorage.getItem('userinfo')),
            starttime:'',
            endtime:'',
            timedate:[],
            entities:[],
            isall:false,
            panduanwai:-1,
            panduannei:-1,
            panduan:false,
        }
    },
    created(){
        this.shouldCSS()
    },
    mounted() {
        this.GetTimeList();
    },
    methods:{
        chosePeriodtime(e,echild,tiemrs){//选择时间段
        if(this.panduanwai > e){
                this.$message({message:'当前时段不可选',type:'error',duration:500})
            }else if (this.panduanwai == e && this.panduannei >= echild){
                this.$message({message:'当前时段不可选',type:'error',duration:500})
            }else{
                if(this.chosePeriodtimeindex == e + '.' + echild){
                    this.chosePeriodtimeindex = -1 + '.' + echild
                }else{
                    this.chosePeriodtimeindex =e+'.'+echild
                    var reg = /^(\d{4})-(\d{2})-(\d{2})$/;
                    if(!reg.test(this.dataTimer)){
                        this.dateFormat(this.dataTimer)
                    }
                    var starttime =  tiemrs[echild].substring(0,5)
                    var endtime =  tiemrs[echild].substring(6,11)
                    this.starttime = this.dataTimer +' '+ starttime+':00'
                    this.endtime = this.dataTimer +' '+ endtime+':00'
                    console.log(this.starttime,'999')
                }
            }
        },
        dateFormat:function(time) {
            var date=time;
            var year=date.getFullYear();
            /* 在日期格式中，月份是从0开始的，因此要加0
            * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
            * */
            var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
            var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
            var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
            var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
            var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
            // 拼接
            this.dataTimer = year+"-"+month+"-"+day;
            return year+"-"+month+"-"+day;
        },
        ToCreatedClass(){
            console.log(this.timedate)
            if(this.timedate != ''){
                this.timedate.forEach(e => {
                    
                    var start_time =e.start_time
                    console.log(start_time,'9')
                    this.entities  = [
                        {
                            type:'single_class',
                            offset:'+8',
                            start_time: this.starttime,
                            end_time:this.endtime,
                            master_id:this.unserinfo.user_id
                        },
                        {
                            type:'single_class',
                            offset:'+8',
                            start_time: e.start_time,
                            end_time:e.end_time,
                            master_id:e.master_id
                        }
                    ]
                    console.log(this.entities,'999')
                });
            }else{
                this.entities  = [
                        {
                            type:'single_class',
                            offset:'+8',
                            start_time: this.starttime,
                            end_time:this.endtime,
                            master_id:this.unserinfo.user_id
                        }
                    ]
            }
            
            
            var data ={
                entities :JSON.stringify(this.entities),
                offset:"+8",
                master_id:this.unserinfo.user_id,
                start_time:this.starttime,
            }
            console.log(data,'预约信息')
            this.$axios({
                method:'POST',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/insert',
                data:data,
            }).then((res) =>{
                alert(res.data.message)
                if(res.data.message == "成功"){
                    this.$router.go(-1)
                }
            }).catch((error) =>{
                console.log(error)
            })
        },
        isDuringDate(beginDateStr, endDateStr){
            var curDate = new Date(),
                beginDate = new Date(beginDateStr),
                endDate = new Date(endDateStr);
            if (curDate >= beginDate && curDate <= endDate) {
                return true;
            }
            return false;
        },
        shouldCSS(){
            if(this.dataTimer.length == undefined){
                var yy = this.dataTimer.getFullYear()
                var mm = this.dataTimer.getMonth() + 1
                var dd = this.dataTimer.getDate()
                var panduanDateS = yy + '-' + mm + '-' + dd + ' '
                var panduanDateE = yy + '-' + mm + '-' + dd + ' '
            }else{
                var panduanDateS = this.dataTimer + ' '
                var panduanDateE = this.dataTimer + ' '
            }
            this.Periodtime.some((item,index)=>{
                item.tiemrs.some((itam,indax)=>{
                    panduanDateS = panduanDateS + itam.split('-')[0]
                    panduanDateE = panduanDateE + itam.split('-')[1]
                    this.panduanwai = index
                    this.panduannei = indax
                    this.panduan = this.isDuringDate(panduanDateS,panduanDateE)
                    if(this.panduan){
                        return this.panduan
                    }else{
                        panduanDateS = panduanDateS.substr(0,10)
                        panduanDateE = panduanDateE.substr(0,10)
                    }
                })
                return this.panduan
            })
            if(this.panduanwai == 5 && this.panduannei ==11){
                this.panduanwai = -1
                this.panduannei = -1
            }
            console.log(this.panduanwai,this.panduannei)
        },
        changeTimer(e){
            this.chosePeriodtimeindex = -1
            let nowDate = new Date()
            if(this.dataTimer>nowDate){
                this.panduanwai = -1
                this.panduannei = -1
            }else{
                if(this.dataTimer.getFullYear() < nowDate.getFullYear()){
                    this.panduanwai = 5
                    this.panduannei = 11
                }else if(this.dataTimer.getMonth() < nowDate.getMonth()){
                    this.panduanwai = 5
                    this.panduannei = 11
                }else if(this.dataTimer.getDate() < nowDate.getDate()){
                    this.panduanwai = 5
                    this.panduannei = 11
                }else{
                    this.shouldCSS()
                }
                console.log(this.dataTimer == new Date())
            }
            // console.log(e)
            var reg = /^(\d{4})-(\d{2})-(\d{2})$/;
            if(!reg.test(e)){
                this.dateFormat(e)
            }
            this.GetTimeList()
            console.log(this.dataTimer)
        },
        GetTimeList(){
            this.dateFormat(this.dataTimer)
            var data ={
                type:'single_class',
                offset:'+8',
                start_time:this.dataTimer +' '+ '00:00:00',
                end_time:this.dataTimer +' '+ '23:59:00',
                master_id:this.unserinfo.user_id
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/querySchedule',
                params:data,
            }).then((res) =>{
                this.timedate  = res.data.data
            }).catch((error) =>{
                console.log(error)
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .Createprivateinstructor{
        position: relative;
        background: #ffffff;
        border-radius: 20px;
        padding-bottom: 100px;
    }
    .Createprivateinstructor-title{
        position: relative;
        width: 90%;
        height: 90px;
        margin: 0 auto;
        display: flex;
        font-size: 20px;
        align-items: center;
        border-bottom: 1px solid #47CECF;
        color: #2DC7C8;
        font-weight: bold;
        letter-spacing: 8px;
        cursor: pointer;
    }
    .Createprivateinstructor-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
    .Createprivateinstructor-content>span{
        display: inline-block;
        width: 100%;
        height:40px;
        background:rgba(243,243,243,1);
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        color: #D9D8D8;
        margin-top: 10px;
        cursor: pointer;
    }
    .content{
        position:relative;
        width: 80%;
        margin: 0 auto;
    }
    .content>label{
        display: flex;
        width: 100%;
        margin-top: 30px;
        span{
            width: 10%;
            i{
                color: #FF7336;
            }
        }
    }
    .Createcourse-data{
        height: 60px;
        align-items: center;
        /deep/.el-date-editor{
            width: 50%;
            border: #CECECE;
        }
        /deep/.el-cascader{
            width: 50%;
            border: #CECECE;  
        }
    }
    .Createcourse-Periodtime{
        align-items: center;
        flex-wrap: wrap;
        ul{
            display: flex;
            width: 90%;
            padding: 0;
            flex-wrap: wrap;
            list-style: none;
            margin-left: auto;
            li{
                width: 16%;
                font-size: 12px;
                height: 31px;
                background:rgba(221,221,221,1);
                border-radius:16px;
                margin-top: 10px;
                text-align: center;
                line-height: 31px;
                margin-left: 1%;
                cursor: pointer;
                &:first-child{
                    width: 10%;
                    background: none;
                }
            }
        }
    }
    .Createcourse-Periodtime>span{
        margin-top: -8.5%;
    }
    .Periodtime-List>span{
        width: 6%!important;
        height: 31px!important;
        margin-top: 10px;
        line-height: 31px!important;
    }
    .Periodtime-List>li{
        &:nth-child(7){
            margin-left: 7%;
        }
        &:nth-child(12){
            margin-left: 7%;
        }
    }
    .seled{
        background: #3ACBCC!important;
    }
    .Createcourse-button{
        height: 100px;
        align-items: center;
        padding-bottom: 100px;
        span{
            width: 20%!important;
            height: 41px;
            line-height: 41px;
            text-align: center;
            cursor: pointer;
            &:first-child{
                background:rgba(222,222,222,1);
                border-radius:21px;
                margin-left: 14%;
            }
            &:last-child{
                background:rgba(58,203,204,1);
                border-radius:21px;
                color: #ffffff;
                margin-left: 4%;
            }
        }
    }
</style>